<template>
  <div class="chooseMenuPage">
    <!-- Table -->
    <el-dialog title="菜单选择" :visible.sync="dialogTableVisible" :modal-append-to-body='false'>
      <div class="header">
        <el-row>
          <el-col :span="12">
            <router-link target="_blank" :to="{name: 'menu-list', query: $route.query}">
              <el-button plain type="">管理菜单</el-button>
            </router-link>
          </el-col>
          <el-col :span="12" style="text-align: right;">
            <el-button type="text" @click="getData"><i class="el-icon-refresh"></i> 刷新</el-button>
          </el-col>
        </el-row>

      </div>
      <div class="list" v-loading="loading">
        <div class="item title">菜单名称</div>
        <div class="item" v-for="(item,index) in list" :key="index" @click="choose(item,index)">
          <el-radio class="menu-radio" v-model="radio" :label="item.id"><span></span></el-radio>
          {{ item.name }}
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="setMenu">添 加</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script>
import { getNavigationList } from '@/api/menu-navigation';
import {getSiteId} from '@/utils/auth';

export default {
    props: {
        activeMenu: {
        }
    },
    data () {
        return {
            loading: false,
            dialogTableVisible: false,
            list: '',
            radio: 0,
            menu: {}
        };
    },
    computed: {
        siteId () {
            return this.$store.state.user.siteId;
        }
    },
    methods: {
        choose (item, index) {
            this.radio = item.id;
            this.menu = item;
        },
        setMenu () {
            this.dialogTableVisible = false;
            this.$emit('setCurMenu', this.menu);
        },
        getData () {
            let params = {
                page: 1,
                pageSize: 20,
                siteId: this.siteId
            };
            this.loading = true;
            getNavigationList(params).then((res) => {
                this.list = res.records;
                this.menu = res.records[0];
                this.loading = false;
            }).catch(() => {
                this.loading = false;
            });
        }
    },
    mounted () {
        this.getData();
        this.radio = this.activeMenu;
    // this.$nextTick(() => {
    //     this.$emit('setCurMenu', this.menu);
    // });
    }
};
</script>
<style lang="scss" scoped>

.el-card__header{
  background-color: red;
}
.header{
  padding:0 10px 10px;
}
.list{
  font-size: 12px;
  line-height: 40px;
  .item{
    border-bottom: 1px solid #eee;
    padding-left: 40px;
    height: 40px;
    cursor: pointer;
    position: relative;
    .menu-radio{
      position: absolute;
      margin: 20px 0 0 -24px;
      transform: translate(0%,-50%)

    }

  }
}
.title{
  background-color: #dee1e9;
}
</style>
<style >
.chooseMenuPage .el-dialog__body{
  height: auto !important;
  overflow: auto !important;
}
</style>
